<template>
  <div class="chart-container">
    <component :is="border" ref="dvBord">
      <div class="content">
        <div class="title" v-if="title">
          <span style="margin-left: 10px"> {{ title }}</span>
        </div>
        <div class="content-container">
          <component :is="decoration" v-if="title" :reverse="true" :color="['#75dfff', '#00fbff']"
            style="width: 100%; height: 5px" :key="randDom()" ref="dvDecoration" />
          <div class="slot-content" ref="slotContent">
            <slot></slot>
          </div>
        </div>
      </div>
    </component>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from "vue";
import { useResizeObserver } from '@vueuse/core';

interface borderProps {
  title?: string;
  borderType?: number;
  decorationType?: number;
}
function randDom() {
  return Date.now();
}

const props = withDefaults(defineProps<borderProps>(), {
  borderType: 7,
  decorationType: 6,
});
const border = ref(`dv-border-box${props.borderType}`);
const decoration = ref(`dv-decoration${props.decorationType}`);

const dvBord = ref();
const dvDecoration = ref();
const slotContent = ref();

onMounted(() => {
  nextTick(() => {
    dvBord.value?.initWH();
  });

  useResizeObserver(dvBord, () => {
    nextTick(() => {
      dvBord.value?.initWH();
    });
  });
});
</script>

<style scoped lang="scss">
.chart-container {
  height: 100%;
  background-color: #007aeb00;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  overflow: hidden;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
      color: #abdae9;
      display: flex;
      justify-content: left;
      align-items: center;
      padding-left: 10px;
      height: 35px;
      line-height: 40px;
      font-size: 25px;
      font-family: "DINBold";
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url("../../assets/img/title-bg-long.png");
    }

    .content-container {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      border-radius: 5px;

      .slot-content {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
